<template>
<!-- 课程详情 -->
    <div class="white-bg warp-2" style="height:100%;">
        <navbar :title="$t('mod_exit_save')"></navbar>
        <div class="content-noBottom" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <ul class="ref-box" v-if="freshDetail.length > 0">
                    <li v-for="info in freshDetail" :key="info.id">
                        <p class="margin-bottom10">{{ info.title }}</p>
                        <p class="color666" style="margin-bottom: 10px;" v-if="info.content">{{ info.content }}</p>
                        <div @click="openUrl(info.url)">
                            <div class="other-upFile-style">
                                <div>
                                    <i class="link-document"></i>
                                </div>
                                <div>
                                    <span>{{ info.url | omit }}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!--暂无数据-->
                <div v-if="freshDetail.length <= 0 && freshDetail" style="height:100%;">
                    <div class="box-table" style="width:100%;height:100%;">
                        <div class="box-table-cell" style="text-align: center;">
                            <div class="no-data">
                                <img src="../../../static/images/no-data.png" alt=""/>
                                <p class="color999">{{ $t("no_data") }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </van-pull-refresh>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { getDate } from '@/utils/tools';
export default {
    name: 'refContent',
    data() {
        return {
            onFetching: false, //滚动到底部
            isTop: false,
            pageNo: 1, //分页页码
            total: 0, //列表总数
            refInfo: [],
            data: {},
            isLoading: true,
            cov_status: '',
            freshDetail: [], //新的数据列表
            startTime: new Date().getTime(),
            palpitate: {
                isPause: false, // 是否暂停
                itmId: '', // 课程itmId
                modId: '', // 模块resId
                tkhId: '' // 学习跟踪id
            },
            times: null,
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.getFreshDetail();
                this.isRefresh = false;
            }, 900);
        },
        leave() {
            this.$router.go(-1);
        },
        //  学习心跳
        palpitateTime() {
            this.$axios({
                method: 'POST',
                url: '/app/api/trainee/course/learn/heartbeat',
                data: this.palpitate
            });
        },
        // 保存学习记录
        saveRecord(leave = false) {
            this.$toast(this.$t('mod_save_record'));
            const req = {
                entId: this.$route.params.userEntId,
                itmId: this.$route.params.itmId,
                modId: this.$route.params.modId,
                startTime: this.startTime,
                tkhId: this.$route.params.tkhId
            };
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/module/evaluation`,
                data: req
            }).then(res => {
                if (leave) {
                    return true;
                }
            });
        },
        //新版获取课程详情
        getFreshDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/module/detail`,
                params: {
                    itmId: this.$route.params.itmId,
                    modId: this.$route.params.modId
                }
            }).then(res => {
                if (res && res.status === 200) {
                    this.startTime = res.data.startTime;
                    if (res.data.referenceDTOList !== null) {
                        setTimeout(() => {
                            this.freshDetail = res.data.referenceDTOList;
                            this.isLoading = false;
                        }, 1000);
                    } else {
                        this.isLoading = false;
                    }
                }
            });
        },
        openUrl(url) {
            var serverHost = '';
            var protocol = serverHost.substring(0, serverHost.indexOf('://'));
            if (!protocol) {
                protocol = window.location.protocol.substring(0, window.location.protocol.indexOf(':'));
            }
            if (url.indexOf('/') === 0) {
                url = protocol + '://' + window.location.host + url;
            } else if (url.indexOf('http://') < 0 && url.indexOf('https://') < 0) {
                url = protocol + '://' + url;
            }
            if (this.$store.state.config.plus) {
                this.$store.state.config.plus.runtime.openURL(url);
            } else {
                window.open(url);
            }
        }
    },
    mounted() {
        this.palpitate.itmId = this.$route.params.itmId;
        this.palpitate.modId = this.$route.params.modId;
        this.palpitate.tkhId = this.$route.params.tkhId;
        this.palpitateTime();
        this.times = setInterval(() => {
            this.palpitateTime();
        }, 5000);
        this.getFreshDetail();
        //防止页面刷新,cov_status值丢失
        // if (this.$store.getters.getDetail) {
        //
        //     if (this.$store.getters.getDetail.learnerStatus) {
        //         window.localStorage.setItem('temp_cov_status', this.$store.getters.getDetail.courseEvaluation.learnerStatus);
        //     }
        // }
        // this.cov_status = window.localStorage.getItem('temp_cov_status');
    },
    beforeRouteLeave(to, from, next) {
        next(this.saveRecord(true));
    },
    beforeDestroy() {
        clearInterval(this.times);
        this.times = null;
    },
    filters: {
        omit(val) {
            //
            if (val) {
                let nameString = val.substr(0);
                if (nameString.length > 24) {
                    nameString = `${nameString.substr(0, 14)}...${nameString.substr(-10)}`;
                }
                return `${nameString}`;
            } else {
                return val;
            }
        }
    }
};
</script>

<style scoped lang="less">
    .ref-box {
        li {
            padding: 20px 15px;
            border-bottom: 1px solid #ededed;
        }
    }
    /deep/.van-nav-bar__title {
        margin: 0 10px;
    }
</style>
